<template>
	<!-- 生产队列 -->
	<view class="queue" id="queue" v-if="this.workorder">
		<view class="set-top">

			<view class="">
				<u-button class="uni-button" style="width:200rpx;height: 70rpx;" type="success" @click="setTime">
					刷新
				</u-button>
				<view class="selection-num">
					当前共 {{ workstatList.length }} 条</view>
			</view>
			<view class="" style="display: flex;" v-if="this.workorder">
				<u-button class="uni-button" style="width:200rpx;height: 70rpx;" type="success" @click="clickBack">
					返回上页
				</u-button>
				<u-button
					v-if="isProcess('振动成型')||isProcess('脱模精整')||isProcess('热处理')||isProcess('养护')||isProcess('包装')"
					class="uni-button" style="width:200rpx;height: 70rpx;" type="success" @click="reset">
					撤销
				</u-button>
			</view>

		</view>
		<br />

		<uni-table type="selection" @selection-change="selectionChange" ref="table" :loading="loading" border stripe
			emptyText="暂无更多数据" style="margin-top:60rpx;height: 60vh;">
			<uni-tr>

				<uni-th align="center">发布工单</uni-th>
				<uni-th align="center" v-if="isProcess('热处理')||isProcess('养护')">托盘号</uni-th>
				<uni-th align="center">砖号</uni-th>
				<uni-th align="center">产品牌号</uni-th>
				<uni-th align="center">产品名称</uni-th>
				<uni-th align="center">操作时间</uni-th>

			</uni-tr>
			<uni-tr v-for="(item,index) in workstatList" :key="index">

				<uni-td>{{ item.releaseOrderCode }}</uni-td>
				<uni-td v-if="isProcess('热处理')||isProcess('养护')">{{ item.groupCode }}</uni-td>
				<uni-td>{{ item.brickNumber }}</uni-td>
				<uni-td>{{ item.productName }}</uni-td>
				<uni-td>{{ item.productColor }}</uni-td>
				<uni-td>{{ item.createTime }}</uni-td>

			</uni-tr>

		</uni-table>
		<br />
		<uni-pagination v-if="total>0" @change="change" title="标题文字" show-icon="true" :total="total"
			:current="queryParams.pageNum" :pageSize='queryParams.pageSize' showIcon='true'></uni-pagination>
		<!-- <view class="error-message" v-show="data_connectError">服务器异常</view> -->
		<!-- 确认框 -->
		<u-popup style="z-index: 99;" v-model="modalshow" mode="center" width="30%" height="300rpx" border-radius="10"
			@close="close" @closePop="modalshow=false">
			<view style="width:100%;height: 100rpx;line-height: 150rpx;text-align: center;font-size: 50rpx;">{{content}}
			</view>
			<view style="margin-top: 50rpx;height: 100rpx;display: flex;">
				<u-button type="primary" style="width: 300rpx;margin-bottom: 10rpx;"
					@click="modalConfirm()">确定</u-button>
				<u-button type="primary" :plain="true" style="width: 300rpx;" @click="modalCancel()">取消</u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		components: {

		},
		props: {
			workorder: {
				type: Object,
				default: () => ({})
			},
		},
		created() {
			console.log('workorder', this.workorder)
			this.getList()

		},
		data() {
			return {
				// workstatList: [],
				// 非单个禁用
				loading: false,

				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 20,
					processCode: ''
				},

				// 多选数据
				selectedIndexs: [],
				modalshow: false,
				content: '',
				type: null,
				formData: {},
				formshow: false,
				workstatList: [],
				total: 0,
				headStyle: {
					fontSize: '40rpx'
				},

			};
		},

		methods: {
			// 撤销
			reset() {

				if (this.selectedIndexs.length > 0) {

					uni.showModal({
						title: '提示',
						content: '确定撤销操作？',
						success: (res) => {
							if (res.confirm) {

								let arr = this.selectedIndexs.map(item => {
									return {
										id: item.id,
									}
								})
								this.$u.api.reportingCancel(arr).then(res => {
									console.log('撤销操作', res)
									if (res.code == 200) {
										this.$refs.uToast.show({
											title: '撤销成功',
											type: 'success',
										})
										this.getList()
										this.$refs.table.clearSelection()
									} else {
										this.$refs.uToast.show({
											title: res.msg,
											type: 'error',
										})
									}
								})


							} else {
								console.log('取消')
							}

						},
						fail() {}

					})
				} else {
					this.$refs.uToast.show({
						title: '请先选择工单或者托盘',
						type: 'error',
					})
				}

			},
			// 初始化
			getList() {

				if (this.isProcess('振动成型')) {
					this.$u.api.getALLreporting({
						...this.queryParams,
						processCode: 'FORMING'
					}).then(res => {

						this.workstatList = res.rows
						this.total = res.total
					})
				} else if (this.isProcess('养护')) {
					this.$u.api.getALLreporting({
						...this.queryParams,
						processCode: 'CURING'
					}).then(res => {

						this.workstatList = res.rows.map(item => {
							return {
								...item,
								selected: false
							}
						})

						this.total = res.total
					})
				} else if (this.isProcess('脱模精整')) {
					this.$u.api.getALLreporting({
						...this.queryParams,
						processCode: 'FINISHING'
					}).then(res => {

						this.workstatList = res.rows
						this.total = res.total
					})
				} else if (this.isProcess('热处理')) {
					this.$u.api.getALLreporting({
						...this.queryParams,
						processCode: 'HEAT_TREATMENT'
					}).then(res => {

						this.workstatList = res.rows.map(item => {
							return {
								...item,
								selected: false
							}
						})

						this.total = res.total
					})
				} else if (this.isProcess('包装')) {
					this.$u.api.getALLreporting({
						...this.queryParams,
						processCode: 'PACKAGE'
					}).then(res => {

						this.workstatList = res.rows
						this.total = res.total
					})
				} else {
					// 查询已完工的发布工单
					let arr = {
						status: '6',
						...this.queryParams
					}
					this.$u.api.listreleaseOrder(arr).then(res => {
						if (res.rows.length >= 0) {

							this.workstatList = res.rows;
							this.total = res.total

						}
					});
				}
			},
			change(e) {
				this.queryParams.pageNum = e.current
				this.getList()
			},
			// 方法中可以这样使用
			isProcess(process) {
				return this.workorder && this.workorder.processName === process;
			},
			// 多选
			selectionChange(e) {
				this.selectedIndexs = [];

				e.detail.index.forEach((item, index) => {
					this.selectedIndexs[index] = this.workstatList[item]
				})

			},


			clickBack() {
				uni.navigateBack()
			},
			// 刷新
			setTime() {
				this.getList();
				// this.$emit('updateQueueList')
				this.$refs.table.clearSelection();

			},
			close() {
				this.modalshow = false;
				this.formshow = false
			}

		},
	};
</script>
<style lang="scss" scoped>
	.queue {
		max-height: 100%;
		display: flex;
		padding: 10px;
		flex-direction: column;
	}

	.table-content {
		flex: 1;
		overflow: auto;
		margin: 10px;
	}

	.sort-page {
		flex: 00 32px;
		height: 1px;
	}

	.set-top {
		flex: 0 0 30px;
		height: 1px;
		display: flex;
	}

	.uni-group {
		.uni-button {
			margin: 10px;
		}
	}

	.set-top {
		.uni-button {
			margin-left: 10px;
		}
	}

	.queue ::v-deep {
		.uni-table-td {
			padding: 0;
		}

		.checkbox {
			padding: 0;
			margin: 0 4px;
		}

		.uni-table-checkbox {
			margin: 10px;
		}
	}

	.icon-move {
		margin: 0 4px;
		color: #f5f6f7;
	}

	.icon-disabled {
		// color: var(--theme-text-sub) !important;
	}

	.error-message {
		position: fixed;
		width: 100%;
		background: rgba(255, 0, 0, 0.7);
		bottom: 0;
		left: 0;
		z-index: 999;
		text-align: center; // color: var(--theme-error);color: #fff;padding: 6px ;font-size: 16px;font-weight: bold:
	}

	.row-disabled ::v-deep {
		.uni-table-checkbox {
			display: none;
		}
	}

	.roW-active {
		//   background: var(--theme-color) !important;
	}

	.selection-num {
		display: inline-block;
		line-height: 10px;

		vertical-align: middle;
		margin-left: 10px;
		font-size: 14px;
	}

	::v-deep {

		.uni-table,
		.uni-table-th,
		.uni-table-tr {
			background-color: transparent !important;
			// color: #f5f6f7;
		}
	}

	::v-deep {

		.uni-table,
		.uni-table-th,
		.uni-table-tr,
		.uni-table-td {
			text-align: center !important;
			// color: #f5f6f7;
		}
	}
</style>